<html>
<HTA:APPLICATION ID="FontsViewerDavidXL" APPLICATIONNAME="FontsViewer - davidxl.blogspot.com" ICON="ico.ico" BORDER="yes" CAPTION="yes" MAXIMIZEBUTTON="yes" SHOWINTASKBAR="yes" SINGLEINSTANCE="yes" SYSMENU="yes" VERSION="1.01" SELECTION="no" NAVIGABLE="no" SCROLL="no" CONTEXTMENU="yes" WINDOWSTATE="normal" />
<META HTTP-EQUIV="MSThemeCompatible" CONTENT="yes">
<script type="text/javascript">self.resizeTo(800,550);</script>

<head><title>simpleFontsViewer</title>

<style>
body {
	border:0;
	margin:10;
	background:threedface;
	font-family:"Segoe UI" , Tahoma;
	font-size:10px;
}
a, a:active, a:visited{
 text-decoration: underline;
 color:#00F;
}
#nav{
	margin:0;
	padding: 0 0 8px 0;
}
#preview, #preview2, #fontlist, #fontlist2{
	border:inset 2px #FFF;
	background-color:#FFF;
	height:100%;

}
#fontlist{
	display: block;
	overflow: hidden;
	height:100%;
	width:auto;
}
#fontlist2{
	margin:0;
	padding: 5px;
	display: none;
	overflow: scroll;
	height:100%;
	width:auto;
}
#fontlist2 a{
	display: block;
	text-decoration: none;
	color:#000;
}

#fontlist select{
	overflow:auto;
	height:100%;
}
#preview{
	display:block;
	overflow:auto;
	padding:5px;
	margin:-1px 0 0 0;
	width:100%
}
#preview2{
	padding: 5px;
	display: none;
	overflow: scroll;
	height:100%;
}
#p2in{
	width:3000px;
}
.s1{font-size:8px;}
.s2{font-size:10px;}
.s3{font-size:12px;}
.s4{font-size:14px;}
.s5{font-size:18px;}
.s6{font-size:24px;}
.s7{font-size:32px;}
.s8{font-size:48px;}
.s9{font-size:72px;}
.s10{font-size:120px;}
.s11{font-size:160px;}
</style>

<script type="text/javascript">
var dH, prev, prev2, fl, fl2;
var bgC = 0xFFFFFF,  frC = 0x000000;
var fonts = new Array();

function change(e1,e2)
{
	if(e1.style.display == "block")
	{
		e1.style.display = "none";
		e2.style.display = "block";
	}
	else
	{
		e1.style.display = "block";
		e2.style.display = "none";
	}
}

function changeTXcolor()
{
	frC = dH.ChooseColorDlg(frC); 
	prev.style.color = frC;
	prev2.style.color = frC;
}

function changeBGcolor()
{
	bgC = dH.ChooseColorDlg(bgC);
	prev.style.backgroundColor = bgC;
	prev2.style.backgroundColor = bgC;
} 

function render(fnum, size)
{
	if (fnum !== false)
	{
		prev.style.fontFamily = fonts[fnum];
		prev2.style.fontFamily = fonts[fnum];
	}
	if (size != 0) prev.style.fontSize = size;
}

function resize()
{
	var e1=prev2, e2=prev2;
	var x=0;
	if(e1.offsetParent)
	{
		do
			x += e1.offsetLeft;
		while (e1 = e1.offsetParent);
	}
	while((e2 = e2.parentNode) && e2.nodeName.toUpperCase() !== 'BODY')
		x -= e2.scrollLeft;
	prev2.style.width = (document.body.clientWidth - x - 10) + "px" ;
}

function init()
{
	dH = document.getElementById("dialogHelper");
	prev = document.getElementById("preview");
	prev2 = document.getElementById("preview2");
	fl = document.getElementById("fontlist")
	fl2 = document.getElementById("fontlist2");
		
	fl.style.display = "block";
	fl2.style.display = "none";
	prev.style.display = "block";
	prev2.style.display = "none";
	
	var html = '<select size="30" onChange="javascript:render(this.options[this.selectedIndex].value, 0)">';
	var htm2 = '';
	var c = dialogHelper.fonts.count, i;
	
	for(i = 1; i <= c;i++)
		fonts.push(dH.fonts(i));
  	fonts.sort();
	
	for(i = 0; i < c; i++)
	{
		html += '<option value="'+ i +'">'+ fonts[i] +'</option>\n';
		htm2 += '<a href="#" style="font-family:\''+ fonts[i] +'\'" onClick=\'javascript:render( "'+ i +'" , 0);\' >'+ fonts[i] +'</a>\n';
	}
		
	fl.innerHTML = html + '</select>';
	fl2.innerHTML = htm2;
	resize();
	render(0, document.getElementById("sz").value);
}
</script>

</head>

<body scroll="no" onLoad="init();" onResize="resize();">
<object id="dialogHelper" CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0" height="0"></object>
<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
	    <tr>
    	<td colspan="2" id="nav">
        	<button title="Alternar vista de la lista de fuentes" accesskey="A" onClick="change(fl,fl2);">Alternar lista</button>&nbsp;&nbsp;
        	<button title="Alternar vista de la fuente" accesskey="F" onClick="change(prev,prev2);">Alternar vista</button>&nbsp;&nbsp;
        	<button title="Cambiar el color del texto..."  onClick="changeTXcolor();">Color del texto</button>&nbsp;&nbsp;
            <button title="Cambiar el color de fondo..."  onClick="changeBGcolor();">Color de fondo</button>&nbsp;&nbsp;
            &nbsp;&nbsp;<label for="sz">Font size:</label>
        	<input type="text" size="2" id="sz" value="16" onKeyUp="render(false,this.value)" /></td>
    </tr>
    <tr>
    	<td><div id="fontlist"></div><div id="fontlist2"></div></td>
        <td width="100%" height="100%"><textarea id="preview" title="Click here to edit the sample text" wrap="soft">
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
        
The quick brown fox jumps over the lazy dog...
        
        </textarea>
        <div id="preview2"><div id="p2in">
        	<div class="s1">The quick brown fox jumps over the lazy dog...</div>
            <div class="s2">The quick brown fox jumps over the lazy dog...</div>
            <div class="s3">The quick brown fox jumps over the lazy dog...</div>
            <div class="s4">The quick brown fox jumps over the lazy dog...</div>
            <div class="s5">The quick brown fox jumps over the lazy dog...</div>
            <div class="s6">The quick brown fox jumps over the lazy dog...</div>
            <div class="s7">The quick brown fox jumps over the lazy dog...</div>
            <div class="s8">The quick brown fox jumps over the lazy dog...</div>
            <div class="s9">The quick brown fox jumps over the lazy dog...</div>
            <div class="s10">The quick brown fox jumps over the lazy dog...</div>
            <div class="s11">The quick brown fox jumps over the lazy dog...</div>
        </div></div></td>
    </tr>

</table>
</body>
</html>